<template>
    <div class="btnGroup">        
        <div class="btnGroupItem " v-for="(btn,index) in buttons" :class="getClass(index)"  @click="handleClick(index)" >{{ btn }}</div>        
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const emit = defineEmits(['select'])

interface BtnGroupProps {
    buttons:string[]
}
const {buttons} = defineProps<BtnGroupProps>();

const active = ref(0);

const getClass = (index:number)=>{
    var className='';
    if(index == buttons.length-1){
        className += ' lastItem'
    }

    if(active.value == index){
        className +=' active';
    }
        
    return className;
}

const handleClick = (index:number)=>{
    active.value = index;
    emit('select',index)
}

</script>
<style lang="less" scoped>
.btnGroup{
    display: flex;
    width: 100%;
    justify-content: center;

    .btnGroupItem{
        padding:2px 12px;
        border:1px solid #4385f5;        
        border-right:none;     
    }

    .btnGroupItem.lastItem{
        border-right:1px solid #4385f5 !important;        
    }
    .btnGroupItem.active{
        color: #fff;
        background-color: #4385f5;
    }
}
</style>